@import "mixins";

$default-background-color: #314b64;
$default-border: 1px solid #0f161e;
$default-border-radius: 12px;
$default-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
$default-color: #d2dfe7;
$default-text-shadow: 0 -1px 1px #0f161e;
$default-link-color: #98cbea;
$default-link-text-shadow: 0 -1px 1px #0f161e;
$default-arrow-color: #1a2634;
$default-arrow-border-color: #0f161e;

$blue-arrow-color: #0064b4;
$blue-arrow-border-color: rgba(0, 100, 180, 0.9);
$blue-background-color: #fcfcfc;

$orange-background-color: #f9aa18;

/* smallipop css */

.smallipopHint { display: none; }

.smallipop-instance {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  background-color: $default-background-color;
  border: $default-border;
  color: $default-color;
  z-index: 9999;
  max-width: 400px;
  font {
    size: 11px;
    family: arial;
  }

  a { color: $default-link-color; }

  .sipContent { padding: 10px; }

  .sipArrow, .sipArrowBorder {
    position: absolute;
    left: 50%;
    height: 0;
    width: 0;
  }
  .sipArrow {
    bottom: -20px;
    margin-left: -10px;
    border: 10px solid transparent;
  }
  .sipArrowBorder {
    bottom: -24px;
    margin-left: -12px;
    border: 12px solid transparent;
  }
  &.sipAlignLeft {
    .sipArrow { margin-left:0; left:auto; right:20px; }
    .sipArrowBorder { margin-left:0; left:auto; right:18px; }
  }
  &.sipAlignRight {
    .sipArrow { margin-left:0; left:20px; right:auto; }
    .sipArrowBorder { margin-left:0; left:18px; right:auto; }
  }
  &.sipAlignBottom {
    .sipArrow { bottom:auto; top:-20px; }
    .sipArrowBorder { bottom:auto; top:-24px; }
  }

  &.sipPositionedLeft {
    .sipArrow,
    .sipArrowBorder {
      right: -16px;
      left: auto;
      top:50%;
      bottom: auto;
      border-width: 8px;
      margin: -8px 0 0;
    }
    .sipArrowBorder {
      right: -20px;
      border-width: 10px;
      margin: -10px 0 0;
    }
  }

  &.sipPositionedRight {
    .sipArrow,
    .sipArrowBorder {
      left: -16px;
      right: auto;
      top: 50%;
      bottom: auto;
      border-width: 8px;
      margin: -8px 0 0;
    }
    .sipArrowBorder {
      left: -20px;
      border-width: 10px;
      margin: -10px 0 0;
    }
  }

  .smallipop-tour-content {
    padding: 5px 0;
    min-width: 150px;
  }
  .smallipop-tour-footer {
    padding-top: 5px;
    position: relative;
  }
  .smallipop-tour-progress {
    color: #bbb;
    text-align: center;
    position: absolute;
    left: 50%;
    width: 80px;
    margin-left: -40px;
    top: 8px;
  }
  .smallipop-tour-prev,
  .smallipop-tour-next,
  .smallipop-tour-close {
    color: #ccc;
    display: block;
    padding: 3px 4px 2px;
    line-height: 1em;
    float: left;
    background: darken($default-background-color, 10%);
    @include border-radius(3px);
    @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.3));

    &:hover {
      color: #fff;
      background: darken($default-background-color, 5%);
      text-decoration: none;
    }
  }
  .smallipop-tour-next,
  .smallipop-tour-close {
    float: right;
  }
}

// import themes
@import "theme_default";
@import "theme_blue";
@import "theme_black";
@import "theme_orange";
@import "theme_white";

/* fat shadow extension theme */
.smallipop-instance.fatShadow {
  @include box-shadow(0 2px 20px rgba(0, 0, 0, 0.8));
}
